<template>
  <div class="container">
    <!-- 头部 -->
    <div class="container-header">
      <div class="container-img">
        <div class="scrollz">
          <transition-group name="slide" class="scroll-container1">
            <img
              v-for="(image, index) in images"
              :key="index"
              :src="image"
              :style="{ transform: `translateX(${offset}px)` }"
            />
          </transition-group>
        </div>
        <div class="container5">
          <img src="@/assets/newBigdata/min.png" alt="" class="min" />
        </div>
        <!-- <img src="@/assets/newBigdata/min.png" class="min" /> -->

        <div class="scrollz">
          <transition-group name="slide" class="img-you">
            <img
              v-for="(image, index) in imagey"
              :key="index"
              :src="image"
              :style="{ transform: `translateX(${offset2}px)` }"
            />
          </transition-group>
        </div>
        <div class="juxin"></div>
        <div class="juxin2"></div>
        <div class="juxin3"></div>
      </div>
      <div class="back" @click="back">
        <img src="@/assets/newBigdata/fanhui.png" alt="" class="back-img" />
      </div>
      <div class="header-title">
        <div class="header-title1">{{ Newbigdatas.title }}</div>
      </div>
      <div class="header-settings">
        <div class="date">{{ currentDate }}</div>
        <!-- <div class="time">10:40:35</div>
        <div class="week">星期一</div> -->
        <!-- <img src="@/assets/newBigdata/ic-yun.png" alt="" class="weather-img" /> -->
        <!-- <div class="weather">多云</div>
        <div class="temperature">26℃ - 34℃</div> -->

        <Eweathe></Eweathe>

        <img src="@/assets/newBigdata/shezhi.png" alt="" />
      </div>
    </div>
    <div class="container-main">
      <!-- 左边 -->
      <div class="container-left">
        <div class="left-main">
          <!-- 商户和供应商 -->
          <div class="left_item1">
            <my-heaher title="商户和供货商总数量"></my-heaher>
            <div class="left-main-cark1">
              <div class="left-cark1-box1">
                <img
                  src="@/assets/newBigdata/ic-shzs-bg.png"
                  alt=""
                  class="left-main-img"
                />
                <p class="left-cark1-sz" id="member_num">
                  <!-- {{ 416 || Newbigdatas.member_num }} -->
                </p>
                <span class="shzs">商户总数</span>
              </div>
              <div class="left-cark1-box2">
                <img
                  src="@/assets/newBigdata/ic-gyszs-bg.png"
                  alt=""
                  class="left-main-img"
                />
                <p class="left-cark1-sz" id="supplier_num">
                  <!-- {{ 26 || Newbigdatas.supplier_num }} -->
                </p>
                <span class="gyszs">供应商总数</span>
              </div>
            </div>
          </div>
          <!-- 今日溯源产品使用统计 -->
          <div class="left_item2">
            <my-heaher title="溯源产品使用统计"></my-heaher>
            <my-echart
              class="left-echart1"
              :option="left_echart1_option"
            ></my-echart>
          </div>
          <!-- 今日商户TOP5 -->
          <div class="left_item3">
            <my-heaher title="今日商户TOP5"></my-heaher>
            <my-cark
              :myStyle="left_cark3_style"
              :dataList="left_cark3_data"
            ></my-cark>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="container-middle">
        <div class="container-middle-top">
          <div class="middle-top-title">订单总金额</div>
          <div class="middle-top-main">
            <div
              class="top-main-box1"
              v-for="(item, index) in total_price"
              :key="index"
            >
              <!-- parseInt -->
              <p class="blockTop"></p>
              <span class="blockBottom"></span>
              <div class="figure">{{ item }}</div>
            </div>
            <!-- <div class="top-main-box1">
              <p class="blockTop"></p>
              <span class="blockBottom"></span>
              <div class="figure">2</div>
            </div>
            <div class="top-main-box1">
              <p class="blockTop"></p>
              <span class="blockBottom"></span>
              <div class="figure">2</div>
            </div>
            <div class="top-main-box1">
              <p class="blockTop"></p>
              <span class="blockBottom"></span>
              <div class="figure">6</div>
            </div>
            <div class="top-main-box1">
              <p class="blockTop"></p>
              <span class="blockBottom"></span>
              <div class="figure">5</div>
            </div> -->
          </div>
          <div class="middle-top-money">
            <span v-show="this.toprice">万</span>
            <span>元</span>
          </div>
        </div>
        <div class="container-middle-main">
          <!-- 地图 -->
          <div class="middle-main-left">
            <echart-map
              :day_address_num_list="day_address_num_list"
              :city_name="city_name"
            ></echart-map>
          </div>

          <div class="middle-main-right">
            <div class="main-right-box1">
              <div class="main-right-img">
                <img src="@/assets/newBigdata/ic-jrxd.png" alt="" />
                <p class="right-box1-numder" id="order_increased">
                  <!-- {{ Newbigdatas.order_increased }} -->
                </p>
              </div>
              <span class="main-right-title">今日下单数量(笔)</span>
            </div>
            <div class="main-right-box2">
              <div class="main-right-img">
                <img src="@/assets/newBigdata/ic-jrps.png" alt="" />
                <p class="right-box2-numder" id="order_send">
                  <!-- {{ Newbigdatas.order_send }} -->
                </p>
              </div>
              <span class="main-right-title">今日配送订单(笔)</span>
            </div>
            <div class="main-right-box3">
              <div class="schedule-box1">
                <div class="schedule-title">今日发货进度</div>
                <div class="schedule-main1" :style="{ '--color': send_rate }">
                  <div class="schedule-main-box"></div>
                </div>
              </div>
              <div class="schedule-box2">
                <div class="schedule-title">今日分拣进度</div>
                <div class="schedule-main2" :style="{ '--colors': sort_rate }">
                  <div class="schedule-main-box"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container-middle-bottom">
          <!-- 近7日商品销量TOP5 -->
          <div class="middle-bottom-box1">
            <my-heaher title="近7日商品销量TOP5"></my-heaher>
            <my-echart
              class="middle-echart1"
              :option="middle_bottom_echart1"
            ></my-echart>
          </div>

          <!-- 近30天配送订单曲线 -->
          <div class="middle-bottom-box2">
            <my-heaher title="近30天配送订单曲线"></my-heaher>
            <my-echart
              class="middle-echart2"
              :option="middle_bottom_echart2"
            ></my-echart>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="container-right">
        <div class="container-right-main">
          <!-- 安全预警 -->
          <div class="Commercia">
            <my-heaher title="安全预警"></my-heaher>
            <div class="right-cark1">
              <div class="right-cark1_box1">
                <span class="right-cark_title1">{{
                  Newbigdatas.warning_count
                }}</span>
                <img
                  src="@/assets/newBigdata/ic-yjxx.png"
                  alt=""
                  class="right-cark1-img"
                />
                <p class="forewarning">预警信息</p>
              </div>
              <div class="right-cark1_box2">
                <span class="right-cark_title2">{{
                  Newbigdatas.security_level
                }}</span>
                <img
                  src="@/assets/newBigdata/ic-aqdj.png"
                  alt=""
                  class="right-cark1-img"
                />
                <p class="secure">安全等级</p>
              </div>
            </div>
          </div>
          <!-- 实时信息 -->
          <div class="Commercia">
            <my-heaher title="实时信息"></my-heaher>
            <my-twocark
              :dataList="right_cark2_data"
              :myStyle="right_cark2_style"
            ></my-twocark>
          </div>
          <!-- 今日供应商TOP5 -->
          <div class="Commercia">
            <my-heaher title="今日供应商TOP5"></my-heaher>
            <my-cark
              :myStyle="right_cark3_style"
              :dataList="right_cark3_data"
            ></my-cark>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import echartHistogram from "../bigData/components/echartHistogram.vue"; //折线图
import MyEchart from "./MyEchart.vue";
import MyHeaher from "./MyHeaher.vue";
import MyCark from "./MyCark.vue";
import MyTwocark from "./MyTwocark.vue";
import echartMap from "./echartMap.vue";
import Eweathe from "./Eweather.vue";
import { mockNewbigdata } from "../../api/newBigData/mock/newbigdata";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn"; // 导入中文语言包
dayjs.locale("zh-cn"); // 设置语言为中文
export default {
  components: {
    echartHistogram,
    MyEchart,
    MyHeaher,
    MyCark,
    MyTwocark,
    echartMap,
    Eweathe,
    // AnimatedBorder,
  },
  name: "newBigData",
  data() {
    return {
      // 目标数字
      // endVal: 20000,
      // 动画持续时间（单位：毫秒）
      duration: 3000,
      // 当前数字，初始值为0
      currentVal: 0,
      // 动画开始时间
      startTime: null,

      images: [
        require("@/assets/newBigdata/img-zuo.png"),
        require("@/assets/newBigdata/img-zuo.png"),
      ],
      imagey: [
        require("@/assets/newBigdata/img-you.png"),
        require("@/assets/newBigdata/img-you.png"),
      ],
      // images: [
      //   {
      //     id: 1,
      //     url: require("@/assets/newBigdata/img-zuo.png"),
      //     active: false,
      //   },
      //   {
      //     id: 2,
      //     url: require("@/assets/newBigdata/img-you.png"),
      //     active: false,
      //   },
      // ],
      offset: 0,
      offset2: 0,
      times: null,
      currentIndex: 0,
      send_rate: 0,
      sort_rate: 0,
      toprice: false,
      Newbigdatas: [],
      currentDate: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss dddd"),
      // 配置实时时间
      timer: null,
      total_price: '',
      // day_user_num_list_length: 0, //商户名称数据条数记录
      dataList: [
        { img: require("@/assets/newBigdata/one.png") },
        { img: require("@/assets/newBigdata/two.png") },
        { img: require("@/assets/newBigdata/three.png") },
        { rank: "4" },
        { rank: "5" },
      ],
      // 地图数据
      day_address_num_list: [],
      // 市区
      city_name: "南昌市",
      // 溯源产品使用统计
      left_echart1_option: {
        color: [
          "#2D6DEA",
          "#DECF38",
          "#E4AA39",
          "#00BCBB",
          "#44C0E2",
          "#9398A8",
          "#DEE6FF",
        ],
        label: {
          show: true,
          formatter(data) {
            // correct the percentage
            return data.name + data.value;
          },
        },
        title: {
          text: "实时统计",
          left: "center",
          top: "45%",
          // padding:[24,0],
          textStyle: {
            color: "#9EC7FF",
            align: "center",
            fontSize: "16px",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: [60, 80],
            roseType: "area",
            data: [],
          },
        ],
      },

      // 近30天配送订单曲线

      middle_bottom_echart2: {
        title: {
          text: "元",
          left: "5%",
          top: "10%",
          textStyle: {
            color: "#9EC7FF",
            fontSize: "13px",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            // "08-14",
            // "08-19",
            // "08-24",
            // "08-29",
            // "09-03",
            // "09-08",
            // "08-14",
            // "08-19",
            // "08-24",
            // "08-29",
            // "09-03",
            // "09-08",
            // "08-14",
            // "08-19",
            // "08-24",
            // "08-29",
            // "09-03",
            // "09-08",
          ],
          axisLabel: {
            color: "#9EC7FF",
          },
          splitLine: {
            lineStyle: {
              color: "#273569",
              width: 2, // 设置分割线的粗细为2
            },
          },
          // 刻度是否显示
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#9EC7FF",
          },
          axisLine: {
            lineStyle: {
              color: "#2D3C5C",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#2D3C5C",
            },
          },
        },
        series: [
          {
            data: [
              // 820, 932, 901,
              // 934, 1290, 1330, 1320, 324, 231, 4534, 234, 12
            ],
            type: "line",
            smooth: 0.4, //调整曲线程度，范围为 0 到 1
            areaStyle: {
              color: "rgba(14,156,255,0.2)",
            },
            labelLine: {
              // smooth: 0.1,
            },
            lineStyle: {
              color: "#0E9CFF",
            },
            showSymbol: false,
          },
        ],
      },
      // 近7日商品销量TOP5
      middle_bottom_echart1: {
        title: {
          text: "元",
          top: 20,
          left: 30,
          textStyle: {
            color: "#9EC7FF",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },

        color: ["#19ABFF"],
        xAxis: {
          type: "category",
          data: [],
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#9EC7FF",
            fontSize: 11,
            rotate: -20, //通过旋转字体角度处理位置不足
          },
          //改变轴线的颜色
          axisLine: {
            lineStyle: {
              color: "#2D3C5C",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#9EC7FF",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#2D3C5C",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#2D3C5C",
            },
          },
          // interval: 25,
        },
        series: [
          {
            data: [],
            type: "bar",
            showBackground: true,
            barWidth: "12%",
            label: {
              fontSize: 8,
              align: "center",
            },
            backgroundStyle: {
              color: "#061F5D ",
            },
          },
        ],
      },
      // 左边卡片
      left_cark3_style: {
        width: "100%",
        height: "18.4375rem",
      },
      left_cark3_data: {
        title: "商户名称",
        unit: "单",
        dataList: [
          {
            name: "",
            single: "",
            myColor: "#FF3B59",
            contrast_last_day: "",
          },
          {
            name: "",
            single: "",
            myColor: "#FF9B6A",
            contrast_last_day: "",
          },
          {
            name: "",
            single: "",
            myColor: "#FFD074",
            contrast_last_day: "",
          },
          {
            name: "",
            single: "",
            contrast_last_day: "",
          },
          {
            name: "",
            single: "",
            contrast_last_day: "",
          },
        ],
      },
      // 右边卡片的样式
      right_cark2_style: {
        width: "100%",
        height: "16.5625rem",
      },
      right_cark3_style: {
        width: "100%",
        height: "21.95rem",
      },
      //   右边卡片的数据
      right_cark2_data: {
        title: "实时订单", //
        unit: "时间",
        dataList: [
          // {
          //   name: "张*起",
          //   single: "2023-06-14 10:51:30",
          //   rank: "1",
          // },
          // {
          //   name: "李*尔",
          //   single: "2023-06-14 10:50:34",
          //   rank: "2",
          // },
          // {
          //   name: "赵*",
          //   single: "2023-06-14 10:48:35",
          //   rank: "3",
          // },
          // { name: "刘*已", single: "2023-06-14 10:47:15", rank: "4" },
          // { name: "彭*燕", single: "2023-06-14 10:46:36", rank: "5" },
          // { name: "杨*伽", single: "2023-06-14 10:46:34", rank: "6" },
          // { name: "杨*伽", single: "2023-06-14 10:46:34", rank: "6" },
        ],
      },
      right_cark3_data: {
        title: "供应商名称",
        unit: "单",
        dataList: [
          {
            name: "",
            single: "",
            myColor: "#FF3B59",
            contrast_last_day: "",
          },
          {
            name: "",
            single: "",
            myColor: "#FF9B6A ",
            contrast_last_day: "",
          },
          {
            name: "",
            single: "",
            myColor: "#FFD074",
            contrast_last_day: "",
          },
          { name: "", single: "", contrast_last_day: "" },
          { name: "", single: "", contrast_last_day: "" },
        ],
      },
      // 地图
      data: "",
      option: "",
    };
  },
  computed: {},
  methods: {
    startScroll() {
      setInterval(() => {
        // 设置当前激活图片的索引
        this.currentIndex = (this.currentIndex + 1) % this.images.length;

        // 更新图片列表的激活状态
        // this.images.forEach((image, index) => {
        //   image.active = index === this.currentIndex;
        // });
      }, 2000);
    },

    convertNumberToArray(number) {
      this.toprice = false; //元
      if (number < 1) {
        return "00000" + number;
      } else if (number < 10) {
        return "0000" + number;
      } else if (number < 100) {
        return "000" + number;
      } else if (number < 1000) {
        return "00" + number;
      } else if (number < 10000) {
        return "0" + number;
      } else {
        this.toprice = true; //万元
        number = Math.floor(number / 10000);
        if (number < 10) {
          return "0000" + number;
        } else if (number < 100) {
          return "000" + number;
        } else if (number < 1000) {
          return "00" + number;
        } else if (number < 10000) {
          return "0" + number;
        } else {
          return number;
        }
      }
    },

    // 初始化请求
    bigData() {
      let data = this.getPackage();

      mockNewbigdata(data).then(
        (res) => {
          this.Newbigdatas = res.data;
          // 设置今日发货进度
          this.sort_rate = Math.floor(res.data.sort_rate) + "%";
          // 设置今日分拣进度
          this.send_rate = Math.floor(res.data.send_rate) + "%";
          // 设置城市名称
          this.city_name = res.data.city_name;
          // 设置城市数据
          this.day_address_num_list = res.data.day_address_num_list;
          // 获取溯源产品使用统计的数据并格式化
          let list = res.data.trace_list.map((item, index) => {
            return {
              value: item.query_count,
              name: item.name,
            };
          });
          this.left_echart1_option.series[0].data = list;

          // 近7日商品销量
          this.middleechart1();

          this.Newbigdatas.day_user_num_list.map((item, index) => {
            if (index >= 5) {
              return;
            }
            // 今日商户TOP5
            this.left_cark3_data.dataList[index].name = item.name;
            this.left_cark3_data.dataList[index].single = item.num;
            this.left_cark3_data.dataList[index].contrast_last_day =
              item.contrast_last_day;
            this.left_cark3_data.dataList[index] = {
              ...this.left_cark3_data.dataList[index],
              ...this.dataList[index],
            };
          });
          // this.day_user_num_list_length =
          //   this.Newbigdatas.day_user_num_list.length;
          // this.left_cark3_data.dataList = this.left_cark3_data.dataList.slice(
          //   0,
          //   this.day_user_num_list_length
          // );
          // console.log(this.left_cark3_data.dataList);

          this.middle_bottom_echart2.xAxis.data =
            this.Newbigdatas.send_money_list.map((item, index) => {
              // 近30天配送订单曲线日期
              if (index >= 30) return;
              return item.day;
            });

          if (this.middle_bottom_echart2.title.text == "元") {
            // this.middle_bottom_echart2.series[0].data
            const sunre = this.Newbigdatas.send_money_list.map(
              (item, index) => {
                // 近30天配送订单曲线价格
                if (index >= 30) return;
                return item.send_money;
              }
            );
            const dev = sunre.some((item) => {
              if (item >= 10000) return true;
            });
            if (dev) {
              this.middle_bottom_echart2.title.text = "万元";
              this.middle_bottom_echart2.series[0].data =
                this.Newbigdatas.send_money_list.map((item, index) => {
                  if (index >= 30) return;
                  const sdfd = item.send_money / 10000;
                  return sdfd;
                });
            } else {
              this.middle_bottom_echart2.series[0].data = sunre;
            }
          }
          // right_cark3_data
          this.Newbigdatas.day_order_num_list.map((item, index) => {
            if (index >= 5) {
              return;
            }
            // 今日供应商Top5
            this.right_cark3_data.dataList[index].name = item.name;
            this.right_cark3_data.dataList[index].single = item.num;
            this.right_cark3_data.dataList[index].contrast_last_day =
              item.contrast_last_day;
            this.right_cark3_data.dataList[index] = {
              ...this.right_cark3_data.dataList[index],
              ...this.dataList[index],
            };
          });
          // 转换时间戳函数
          function getData(n) {
            let now = new Date(n);
            let y = now.getFullYear();
            let m = now.getMonth() + 1;
            let d = now.getDate();
            return (
              y +
              "-" +
              (m < 10 ? "0" + m : m) +
              "-" +
              (d < 10 ? "0" + d : d) +
              " " +
              now.toTimeString().substr(0, 8)
            );
          }
          // 实时订单
          this.right_cark2_data.dataList = res.data.list.map((item, index) => {
            let data = {
              name: item.member.nickname,
              single: getData(Number(item.created_at) * 1000),
              rank: index + 1,
            };
            return data;
          });
          this.startCount();
          new qlCountUp({
            el: '#supplier_num',
            count: 26 || this.Newbigdatas.supplier_num,
          });
          new qlCountUp({
            el: '#member_num',
            count: 416 || Newbigdatas.member_num ,
          });
          new qlCountUp({
            el: '#order_increased',
            count: this.Newbigdatas.order_increased,
          });
          new qlCountUp({
            el: '#order_send',
            count: this.Newbigdatas.order_send,
          });
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //

    //  近7日商品销量
    middleechart1() {
      this.middle_bottom_echart1.xAxis.data = this.Newbigdatas.goods
        .slice(0, 5)
        .map((item, index) => {
          // 7日商品销量TOP5 名称.
          if (index < 5) {
            return item.goods_name;
          }
        });
      // 价格
      if (this.middle_bottom_echart1.title.text == "元") {
        const reun = this.Newbigdatas.goods.slice(0, 5).map((item, index) => {
          // 7日商品销量TOP5 价格
          if (index >= 5) {
          } else {
            return Math.floor(item.send_money);
          }
        });
        const dev = reun.some((item) => {
          if (item >= 10000) return true;
        });
        if (dev) {
          this.middle_bottom_echart1.title.text = "万元";
          this.middle_bottom_echart1.series[0].data = this.Newbigdatas.goods
            .slice(0, 5)
            .map((item, index) => {
              // 7日商品销量TOP5 价格
              if (index >= 5) {
              } else {
                const mone = item.send_money / 10000;
                return mone;
              }
            });
        } else {
          this.middle_bottom_echart1.series[0].data = reun;
        }
      }
    },

    startCount() {
      // 使用requestAnimationFrame()方法实现动画效果
      window.requestAnimationFrame((timestamp) => {
        // 如果startTime属性为空，则将当前时间赋值给它
        if (!this.startTime) this.startTime = timestamp;
        // 计算当前时间与动画开始时间之间的时间差，以及时间差所占总时间的百分比
        const progress = timestamp - this.startTime;
        const percentage = Math.min(progress / this.duration, 1);
        // 根据时间百分比计算当前数字，并将其赋值给currentVal属性
        this.currentVal = Math.floor(
          percentage * (this.Newbigdatas.total_price - 0) + 0
        );
        // 如果动画持续时间还没有达到，则继续循环调用startCount()方法
        if (progress < this.duration) {
          this.startCount();
        }

        // 操作订单总金额数据;
        this.total_price = this.convertNumberToArray(
          Math.floor(this.currentVal)
        );
      });
    },

    // 返回上一页
    back() {
      this.$nextTick(() => {
        this.$router.back(-1);
      });
    },
    // 全屏
    // screen() {
    //   let element = document.documentElement;
    //   var requestMethod =
    //     element.requestFullScreen || //W3C
    //     element.webkitRequestFullScreen || //Chrome等
    //     element.mozRequestFullScreen || //FireFox
    //     element.msRequestFullScreen; //IE11
    //   if (requestMethod) {
    //     requestMethod.call(element);
    //   } else if (typeof window.ActiveXObject !== "undefined") {
    //     var wscript = new ActiveXObject("WScript.Shell");
    //     if (wscript !== null) {
    //       wscript.SendKeys("{F11}");
    //     }
    //   }
    // },
    // outFullCreeen() {
    //   let element = document;
    //   let requestMethod =
    //     element.cancelFullScreen ||
    //     element.webkitCancelFullScreen ||
    //     element.mozCancelFullScreen ||
    //     element.exitFullScreen;
    //   if (requestMethod) {
    //     requestMethod.call(element);
    //   } else if (typeof window.ActiveXObject !== "undefined") {
    //     var wscript = new ActiveXObject("WScript.Shell");
    //     if (wscript !== null) {
    //       wscript.SendKeys("{F11}");
    //     }
    //   }
    // },

    // 封装请求前函数
    getPackage(data) {
      return Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
    },
    changeNum() {
      (function (win, doc) {
        var defaultOptions = {
          el: '',//当前展示的组件的筛选器
          count: 1000,
          speed: 10,
          onStart: function () { },
          onEnd: function () { }
        }

        function countUp(options) {
          var _this = this;
          if (!options)
            throw new Error("请配置计算参数");

          _this = Object.assign(_this, defaultOptions, options);
          _this.element = doc.querySelector(_this.el) || doc.querySelectorAll(_this.el);
          if (!_this.element)
            throw new Error("获取dom元素失败");

          //计算处理
          _this.countAdd();
        }

        countUp.prototype = {
          //按指定速度计算并展示
          countAdd: function () {
            var _this = this;
            //初始化单位数字
            var element = _this.element;
            var max = 100, //最大步数
              count = _this["count"],
              speed = Math.floor(count / max),
              sum = 0,//计算累计总和
              running = 1;
            //滚动开始
            _this.onStart();
            var timer = setInterval(() => {
              if (running <= max && speed != 0) {
                sum = speed * running;
                element.innerText = sum;
                running++;
              }
              else if (sum < count) {
                sum++;
                element.innerText = sum;
              }
              else {
                clearInterval(timer);
                //滚动结束
                _this.onEnd();
              }

            }, _this.speed);
          }
        }

        win.qlCountUp = countUp;
      })(window, document);
    }
  },
  // watch:{
  //   this.Newbigdatas:((){
  //   this.startCount()
  //   })
  // },

  mounted() {
    this.bigData();
    this.timer = setInterval(() => {
      this.currentDate = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss dddd");
    }, 1000);
    // this.startScroll();
    this.times = setInterval(() => {
      // if (this.offset2 <= -585) {
      //   this.offset2 = 0;
      // } else {
      //   this.offset2 -= 5; // 每次移动5像素
      // }
      // if (this.offset >= 585) {
      //   this.offset = 0;
      // } else {
      //   this.offset += 5; // 每次移动5像素
      // }
      if (this.offset <= -585) {
        this.offset = 0;
      } else {
        this.offset -= 5; // 每次移动5像素
      }

      if (this.offset2 >= 585) {
        this.offset2 = 0;
      } else {
        this.offset2 += 5; // 每次移动5像素
      }
    }, 40);
    this.changeNum()
  },

  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.times);
  },
};
</script>
  
<style lang="scss" scoped>
.container {
  width: 120rem;
  // overflow: hidden;
  min-height: 100%;
  // max-height: 100vh;
  height: 67.5rem;
  position: relative;
  background: url("../../assets/newBigdata/img-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.container-header {
  width: 100%;
  position: relative;
  height: 4.6875rem;

  .container-img {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    .juxin {
      width: 80px;
      height: 3px;
      background: #ffcb2b;
      position: absolute;
      left: 38.9375rem;
      top: 6.3125rem;
      z-index: 100;
      animation: slide-junx 6s linear infinite;
    }
    .juxin2 {
      width: 80px;
      height: 3px;
      background: #ffcb2b;
      position: absolute;
      left: 32rem;
      z-index: 100;
      animation: slide-junx2 6s linear infinite;
      // transform: rotate(55deg) translateX(84px);
      // transform: rotate(53deg) translateX(110px);
    }
    .juxin3 {
      width: 80px;
      height: 3px;
      background: #ffcb2b;
      position: absolute;
      right: 32rem;
      z-index: 100;
      animation: slide-junx3 6s linear infinite;
      // transform: rotate(126deg) translateX(108px);
      // transform: rotate(125deg) translateX(85px);
    }

    @keyframes slide-junx2 {
      0% {
        transform: rotate(55deg) translateX(84px);
        background: rgba(0, 0, 0, 0);
      }

      74% {
        transform: rotate(55deg); // 一共移动xx像素
        background: rgba(0, 0, 0, 0);
      }
      75% {
        transform: rotate(55deg);
        background: #ffcb2b;
      }
      100% {
        transform: rotate(55deg) translateX(84px);
        // background: rgba(0, 0, 0, 0);
      }
    }

    @keyframes slide-junx3 {
      0% {
        transform: rotate(125deg) translateX(85px);
      }
      25% {
        transform: rotate(125deg);

        background: #ffcb2b;
      }
      26% {
        transform: rotate(125deg); // 一共移动xx像素
        background: rgba(0, 0, 0, 0);
      }
      100% {
        transform: rotate(125deg) translateX(85px);
        background: rgba(0, 0, 0, 0);
      }
    }

    @keyframes slide-junx {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(37rem); // 一共移动xx像素
      }
    }
    // .scrollz {
    //   // width: 36.5625rem;
    //   // height: 100%;
    //   // overflow: hidden;
    // }

    .scroll-container1 {
      position: absolute;
      left: 0rem;
      width: 36.5625rem;
      display: flex;
      overflow: hidden;
      // z-index: 1;
    }
    .slide-enter-active,
    .slide-leave-active {
      transition: transform 0.5s;
    }

    .slide-enter,
    .slide-leave-to {
      transform: translateX(0);
    }

    @keyframes slide-animation {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-485px); // 一共移动585像素
      }
    }

    .slide-move {
      animation: slide-animation 10s linear infinite;
    }

    .img-you {
      position: absolute;
      right: 0rem;
      width: 36.5625rem;
      display: flex;
      overflow: hidden;
      justify-content: center;
      // z-index: 1;
    }

    // .min {
    // position: relative;
    // z-index: 1;
    // }
    .container5 {
      z-index: 100;
      position: relative;
      display: inline-block; /* 或者使用块级元素 */
      .min {
        z-index: 100;
      }
    }

    // .container5::before,
    .container5::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 90%;
      // border-width: 100px 20px 100px 0;
      pointer-events: none;
    }

    // .container5::before {
    //   border-top: 3px solid #ff0000; /* 设置线段颜色 */
    //   animation: lineAnimation 2s infinite; /* 设置动画效果 */
    // }

    .container5::after {
      // border: 3px #ffcb2b;
      // border-spacing: 20px;
      // border-image: 3;
      // border-bottom: 2px solid #ffcb2b;
      // border-left: 2px solid #ffcb2b;
      // border-right: 2px solid #ffcb2b;
      // transform: translateX(40px);
      // transform: rotateY(45deg);
      // transform: scaleX(0.3);
      // animation: lineAnimation 2s infinite alternate; /* 设置动画效果 */
    }

    @keyframes lineAnimation {
      0% {
        transform: scaleX(0.8);
      }
      50% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(0.8);
      }
    }
  }
  .back {
    position: absolute;
    top: 0%;
    // display: flex;
    // align-items: center;
    font-size: 0.208333rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #6bcbff;
    box-sizing: border-box;
    cursor: pointer;
    .back-img {
      // top: 1%;
      width: 1.5rem;
      height: 1.5rem;
      margin: 0.875rem 0 0 1.875rem;
    }
  }
  .header-title {
    position: absolute;
    width: 31%;
    top: 20px;
    left: 34%;
    font-size: 2.25rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff !important;
    text-shadow: 0px 1px 18px #08133b;
    z-index: 100;
    background: linear-gradient(0deg, #439cca 0%, #ffffff 78.5888671875%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    justify-content: center;
    // align-items: center;
    .header-title1 {
      // position: relative;
    }
  }
  .header-settings {
    width: 22%;
    position: absolute;
    right: 0;
    top: 0rem;
    display: flex;
    color: #def1ff;
    font-size: 14px;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
  }
}
.container-main {
  width: 100%;
  height: calc(100% - 5.2875rem);
  // height: 60.625rem;
  position: absolute;
  top: 4.6875rem;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  .container-left {
    height: 100%;
    width: 25%;
    .left-main {
      padding-left: 1.875rem;
      height: 100%;
      width: 100%;
    }
  }
}
/*左边主体部分 */
.left_main {
  width: 100%;
  padding-left: 0.40625rem;
  // padding-top: 3.8%;
  box-sizing: border-box;
  // height: 60.625rem;

  .left_item1 {
    height: 17.7rem;
    width: 100%;
  }

  .left_item2 {
    height: 20.6525rem;
    width: 100%;
  }

  .left_item3 {
    height: 25.3125rem;
    width: 100%;
  }
}
.left-main-cark1 {
  width: 97%;
  height: 16.1875rem;
  display: flex;
  justify-content: space-around;
  position: relative;
  .left-cark1-sz {
    position: absolute;
    top: 30%;
    font-size: 2.25rem;
    font-family: PingFang SC;
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
  }
  .left-cark1-box1,
  .left-cark1-box2 {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .shzs,
    .gyszs {
      margin-bottom: 0.625rem;
      width: 5rem;
      height: 1rem;
      font-size: 1rem;
      font-family: PingFang SC;
      font-weight: 800;
      color: #00a3f8;
    }
    .left-main-img {
      width: 10rem;
      height: 10rem;
    }
  }
}
.left-echart1 {
  width: 100%;
  height: 15.875rem;
  margin-top: 1rem;
}
.left_echart1 {
  height: calc(100% - 36px);
  width: 4.416667rem;
  padding-left: 0.208333rem;
  padding-right: 0.416667rem;
  box-sizing: border-box;
}
/*中间样式 */
.container-middle {
  height: 100%;
  width: 50%;
  &-top {
    height: 8%;
    width: 100%;
    margin-top: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .middle-top-title {
      font-size: 1.625rem;
      font-family: PingFang SC;
      font-weight: 800;
      color: #ffffff;
    }
    .middle-top-main {
      width: 15.4375rem;
      position: relative;
      height: 70%;
      margin-left: 1.125rem;
      display: flex;
      justify-content: space-around;
      .top-main-box1 {
        height: 100%;
        width: 2.8125rem;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        .blockTop {
          width: 45px;
          height: 32px;
          background: #03246f;
          box-shadow: 0px 2px 0px 0px rgba(0, 156, 255, 0.34),
            0px -3px 0px 0px rgba(10, 2, 4, 0.34);
          border-radius: 5px 5px 0px 0px;
        }
        .blockBottom {
          width: 45px;
          height: 32px;
          background: #03246f;
          box-shadow: 0px 2px 0px 0px rgba(0, 156, 255, 0.34),
            0px -3px 0px 0px rgba(10, 2, 4, 0.34);
          border-radius: 0px 0px 5px 5px;
        }
        .figure {
          position: absolute;
          // width: 245px;
          // height: 34px;
          font-size: 3.125rem;
          font-family: PangMenZhengDaoBiaoTiTiMianFeiBan-4;
          font-weight: 700;
          color: #fefefe;
          left: 20%;
          // top: 30%;
          // line-height: 2.125rem;
          text-shadow: 1px 1px 4px rgba(21, 22, 20, 0.3);
          background: linear-gradient(-4deg, #ffe8ce 0%, #fbb8a0 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .TotalAmount {
        position: absolute;
        top: 5%;
        bottom: 50%;
        left: 50%;
        right: 50%;
        font-size: 3.125rem;
        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan-4;
        font-weight: 400;
        color: #fefefe;
        -webkit-background-clip: text;
      }
    }
    .middle-top-money {
      width: 2.25rem;
      height: 1rem;
      font-size: 1.125rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.75rem;
      margin-left: 0.325rem;
      display: flex;
    }
  }
  &-main {
    width: 100%;
    height: 54%;
    display: flex;
    .middle-main-right {
      height: 100%;
      flex: 1;
    }
  }
  /*14*/
  &-bottom {
    width: 100%;
    margin-top: 2%;
    margin: 5% 0 0 0;
    height: 30%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .middle-bottom-box1,
    .middle-bottom-box2 {
      height: 100%;
      width: 45%;
      .middle-echart1 {
        width: 100%;
        // height: 100%;
      }
    }
  }
}
.main-right-box1,
.main-right-box2 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 25%;
  .main-right-title {
    width: 100%;
    text-align: center;
    height: 1rem;
    font-size: 1rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #d2e7ff;
    line-height: 1.75rem;
  }
  .main-right-img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .right-box2-numder,
    .right-box1-numder {
      position: absolute;
      top: 18%;
      // left: 26%;
      font-size: 2.25rem;
      font-family: PangMenZhengDaoBiaoTiTiMianFeiBan-4;
      font-weight: 400;
      color: #00fcf9;
    }
  }
}
.main-right-box3 {
  height: 15%;
  width: 100%;
  margin-top: 2.5rem;
  display: flex;
  align-content: space-around;
  flex-wrap: wrap;
  .schedule-box1,
  .schedule-box2 {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .schedule-title {
      font-size: 1rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #26bcf8;
    }
    .schedule-main1 {
      width: 9rem;
      height: 0.75rem;
      background: rgb(10, 76, 146);
      opacity: 1;
      border-radius: 6px;
      margin-left: 1rem;
      .schedule-main-box {
        width: var(--color);
        height: 100%;
        background: linear-gradient(90deg, #2771ea 0%, #01d1ff 100%);
        border-radius: 6px;
      }
    }
    .schedule-main2 {
      width: 9rem;
      height: 0.75rem;
      background: rgb(10, 76, 146);
      opacity: 1;
      border-radius: 6px;
      margin-left: 1rem;
      .schedule-main-box {
        width: var(--colors);
        height: 100%;
        background: linear-gradient(90deg, #2771ea 0%, #01d1ff 100%);
        border-radius: 6px;
      }
    }
  }
}
.main-right-box1 {
  margin-top: 3.75rem;
}
.main-right-box2 {
  margin-top: 1.25rem;
}
/*右边样式 */
.container-right {
  width: 25%;
  height: 100%;
  .container-right-main {
    width: 27.3125rem;
    height: 100%;
  }
}

.right-cark1 {
  width: 100%;
  height: 11.375rem;
  margin-top: 1rem;
  margin-bottom: 1.58rem;
  display: flex;
  justify-content: space-evenly;
  &_box1,
  &_box2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
    .right-cark_title1,
    .right-cark_title2 {
      width: 100%;
      height: 1.75rem;
      font-size: 2.25rem;
      font-family: PingFang SC;
      font-weight: 800;
      color: #fecc5b;
      align-content: center;
      display: flex;
      justify-content: center;
    }
    .right-cark_title2 {
      color: #1bddff;
    }
    .right-cark1-img {
      width: 5.3125rem;
      height: 4.6875rem;
    }
    .forewarning,
    .secure {
      width: 100%;
      height: 1rem;
      font-size: 1rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #00a3f8;
      display: flex;
      justify-content: center;
    }
  }
}
/* 卡片的公共样式 */
.right-cark1,
.left-main-cark1,
.left-main-cark2 {
  margin-top: 0.625rem;
  background: rgba(16, 27, 168, 0.15);
  border: 2px solid;
  border-image: linear-gradient(-90deg, #070f63, #3d61f3) 2 2;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15);
}
/*地图 */
.container-middle-main {
  height: 34.0625rem;
}
.middle-main-left {
  width: 29.875rem;
  height: 34.0625rem;
  // background: url("../../assets/newBigdata/img-bg.png") no-repeat;
}
.Map {
  // background: url("../../assets/newBigdata/img-bg.png") no-repeat;
}
</style>
  